<template>
	<view class="">

		<div class="contacts">

			<div class="contacts-container">
				<div class="user-list">
					<div class="user-list-item" v-for="(group, id) in groups" :key="id" @click="groupChat(group)">
						<div class="user-item-avatar">
							<image src="/static/images/chatroom/school.png" />
						</div>
						<div class="user-item-info">
							<span class="user-item-info__name">{{ group.typeName }}</span>
						</div>
					</div>
				</div>
			</div>
			<view class="" v-if="groups.length==0">
				<u-empty margin-top="100" text="暂未加入班级" mode="favor"></u-empty>
			</view>
		</div>
	</view>

</template>

<script>
	import {
		profileClassS
	} from "@/api/system/user.js"
	import {
		formatDate
	} from "@/api/utils.js"
	// let goEasy = getApp().globalData.goEasy;
	export default {
		name: 'contacts',
		data() {
			return {
				friends: [],
				groups: [],
				show: true,
				unreadTotal: 0,
				conversations: [],

				actionPopup: {
					conversation: null,
					visible: false
				},
				id: null
			}
		},
		onShow() {
			profileClassS().then((res) => {
				// console.log(res);
				this.groups = res.data
				// console.log(res.data);
				if (res.data.length != 0) {
					this.id = res.data[0].userId
					this.connectGoEasy(res.data[0].userId); //连接goeasy
					this.subscribeGroup(); //建立连接后，就应该订阅群聊消息，避免漏掉

					this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this
						.renderConversations); //监听会话列表变化
					this.loadConversations(); //加载会话列表

				}

			})

		},
		beforeDestroy() {
			this.goEasy.im.off(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.renderConversations);
		},
		methods: {
			formatDate,
			// 连接goEasy
			connectGoEasy(data) {
				uni.showLoading();
				this.goEasy.connect({
					id: data,
					data: {
						name: this.$store.state.user.name,
						avatar: this.$store.state.user.avatar
					},
					onSuccess: () => {
						// console.log('GoEasy connect successfully.')
					},
					onFailed: (error) => {
						// console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error
						// 	.content);
					},
					onProgress: (attempts) => {
						// console.log('GoEasy is connecting', attempts);
					}
				});
			},
			subscribeGroup() {
				profileClassS().then((res) => {
					// console.log(res);
					let groups = res.data;
					let groupIds = groups.map(item => item.classId);
					this.goEasy.im.subscribeGroup({
						groupIds: groupIds,
						onSuccess: function() {
							// console.log('订阅群消息成功');
						},
						onFailed: function(error) {
							// console.log('订阅群消息失败:', error);
						}
					});
				})


			},
			// 加载最新的会话列表
			loadConversations() {
				this.goEasy.im.latestConversations({
					onSuccess: (result) => {
						uni.hideLoading();
						let content = result.content;
						this.renderConversations(content);
						let unreadTotal = content.unreadTotal;
						if (unreadTotal > 0) {
							uni.setTabBarBadge({
								index: 2,
								text: unreadTotal.toString()
							});
						} else {
							uni.removeTabBarBadge({
								index: 2
							});
						}
					},
					onFailed: (error) => {
						uni.hideLoading();
						console.log('获取最新会话列表失败, error:', error);
					}
				});
			},
			renderConversations(content) {
				this.conversations = content.conversations;
			},
			// connectGoEasy(data) {
			// 	let self = this;
			// 	let userData = {
			// 		avatar: this.$store.state.user.avatar,
			// 		nickname: this.$store.state.user.name
			// 	}
			// 	this.goEasy.connect({
			// 		id: data,
			// 		data: userData,
			// 		onSuccess: function() {
			// 			console.log("GoEasy connect successfully.")

			// 			// 加载在线用户列表
			// 			// self.loadOnlineUsers();
			// 		},
			// 		onFailed: function(error) {
			// 			console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error
			// 				.content);
			// 		},
			// 		onProgress: function(attempts) {
			// 			console.log("GoEasy is connecting", attempts);
			// 		}
			// 	});
			// },
			privateChat(friend) {
				uni.navigateTo({
					url: './privateChat?to=' + friend.id
				});
			},

			groupChat(group) {
				this.roomToken = {
					roomId: group.classId,
					roomName: group.typeName,
					userId: group.userId,
					nickname: this.$store.state.user.name,
					avatar: this.$store.state.user.avatar
				};
				let roomTokenAsJsonString = JSON.stringify(this.roomToken)
				// console.log(roomTokenAsJsonString);
				uni.removeTabBarBadge({
					index: 1
				});
				uni.navigateTo({
					// 连接goEasy
					url: "./groupChat?to=" + roomTokenAsJsonString
				})


			},
			chat(conversation) {
				this.roomToken = {
					roomId: conversation.groupId,
					roomName: conversation.data.name,
					userId: this.id,
					nickname: this.$store.state.user.name,
					avatar: this.$store.state.user.avatar
				};
				let roomTokenAsJsonString = JSON.stringify(this.roomToken)
				let path = conversation.type === this.GoEasy.IM_SCENE.PRIVATE ?
					'./privateChat?to=' + conversation.userId :
					'./groupChat?to=' + roomTokenAsJsonString;
				uni.removeTabBarBadge({
					index: 2
				});
				uni.navigateTo({
					url: path
				});
			},
		}
	}
</script>

<style scoped>
	.conversations {
		width: 750rpx;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100%;
	}

	.conversations .scroll-item {
		height: 152rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
	}

	.conversations .scroll-item .head-icon {
		width: 100rpx;
		height: 100rpx;
		margin-right: 28rpx;
	}

	.conversations .scroll-item_info {
		height: 151rpx;
		width: 590rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EFEFEF;
	}

	.conversations .scroll-item_info .item-info-top {
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.conversations .item-info-top_name {
		font-size: 34rpx;
		color: #262628;
	}

	.conversations .item-info-top_time {
		font-size: 26rpx;
		color: rgba(179, 179, 179, 0.8);
		font-family: Source Han Sans CN;
	}

	.conversations .item-info-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.conversations .item-info-bottom-item {
		display: flex;
		justify-content: space-between;
	}

	.item-info-bottom .item-info-top_content {
		font-size: 30rpx;
		color: #b3b3b3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.item-info-bottom .item-info-bottom_action {
		width: 50rpx;
		height: 50rpx;
		font-size: 20rpx;
		background: url("@/static/images/action.png") no-repeat center;
		background-size: 28rpx 30rpx;
	}

	.no-conversation {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #9D9D9D;
	}

	.item-head {
		position: relative;
	}

	.item-head .item-head_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 15rpx;
	}

	.action-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-container .layer {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(51, 51, 51, 0.5);
		width: 100%;
		height: 100%;
		z-index: 99;
	}

	.action-box {
		width: 400rpx;
		height: 240rpx;
		background: #ffffff;
		position: relative;
		z-index: 100;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.action-item {
		text-align: center;
		line-height: 120rpx;
		font-size: 34rpx;
		color: #262628;
		border-bottom: 1px solid #EFEFEF;
	}

	.unread-text {
		color: #d02129;
	}

	.contacts {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contacts .contacts-container {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.contacts .user-list-item {
		height: 132rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}

	.contacts .contacts-title {
		height: 80rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list {
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.contacts .user-item-avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}

	.contacts .user-item-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.contacts .user-item-info {
		height: 130rpx;
		padding-right: 32rpx;
		line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contacts .user-item-info__name {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}

	.contacts .user-item-info__tips {
		height: 44rpx;
		width: 64rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}

	.contacts .online-dot {
		position: absolute;
		width: 32rpx !important;
		height: 32rpx !important;
		right: 0;
		bottom: 0;
	}
</style>
